<template>
	<view class="content ft36 dlc-bg">
		<view class="price-title ft42">手机解绑</view>
		<u-field
			v-model="phone"
			label="手机号"
			placeholder="请填写手机号"
		>
		</u-field>
		<u-field
			v-model="code"
			label="验证码"
			placeholder="请填写验证码"
		>
			<u-toast ref="uToast"></u-toast>
			<u-button size="mini" slot="right" type="success" @click="getVerification">{{tips}}</u-button>
		</u-field>
		<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
		<view class="mg100-x gap">
		      <u-button @click="changeUserPhone" type="success" shape="circle" >{{buttonText}}</u-button>
		</view>
		<u-toast ref="toastModify"></u-toast>
	</view>
</template>

<script>
import { changePhone, getVerificationCode } from '../utils/index.js'
	export default {
		data() {
			return {
				code: '',
				tips: '获取验证码',
				phone:'',
				buttonText:'修改'
			}
		},
		methods:{
			// 获取手机验证码
			async getVerification() {
				if(this.$refs.uCode.canGetCode){
					const {data} = await getVerificationCode({phone:this.phone});
					uni.showLoading({
						title:'正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					},1000);
				}else{
					this.$u.toast('倒计时结束后再发送')
				}
				
			},
			// 对手机号码进行解绑，
			async changeUserPhone() {
				const data = await changePhone({
					userPhone:this.phone,
					code:this.code
					})
					const errMsg = data.data.msg
					if(data.code=='1')
					{
						this.$refs.toastModify.show({
							title:'修改成功',
							type:'success'
						})
					}else{
						this.$refs.toastModify.show({
							title:errMsg,
							type:'warning'
					})
				}
			},
			// 该函数对button中的内容进行修改
			codeChange(text){
				this.tips = text;
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
  text-align: center;
  width: 100%;
  height: 100vh;
}
.price-title {
  height: 120rpx;
  width: 100%;
  line-height: 120rpx;
}
.gap {
	margin-top: 20rpx;
}
</style>